﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="../../twiPicZoom/twiPicZoom.css" rel="stylesheet" type="text/css" />
    <script src="../../jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../../twiPicZoom/jquery.mousewheel.js" type="text/javascript"></script> 
    <script src="../../twiPicZoom/jquery.twiPicZoom.js" type="text/javascript"></script>
    <title>查看图片大图/更改配置</title>
    <script type="text/javascript">
        $(function () {
            $('div[type="twiPicZoom"]').twiPicZoom({srcField:'href'});
        });
    </script>
    <style type="text/css">
        #imgContainer div
        {
            display:inline-block;     
        }
    </style>
</head>
<body>
    <div id="imgContainer">
         <div type="twiPicZoom" href="../../samplePictures/Desert.jpg">
             <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Desert.jpg" />
             <h2>Desert</h2>
         </div>
         <div  type="twiPicZoom"  href="../../samplePictures/Hydrangeas.jpg">
             <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Hydrangeas.jpg"/>
             <h2>Hydrangeas</h2>
         </div>

             
         <div  type="twiPicZoom" href="../../samplePictures/Lighthouse.jpg">
            <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Lighthouse.jpg"/>
            <h2>Lighthouse</h2>
         </div>

         <div  type="twiPicZoom" href="../../samplePictures/Jellyfish.jpg">
            <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Jellyfish.jpg"/>
            <h2>Jellyfish</h2>
         </div>
    </div>
</body>
</html>
